<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 基本表单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="files/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="files/css/font-awesome.min.css" rel="stylesheet">
    <link href="files/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="files/css/animate.css" rel="stylesheet">
    <link href="files/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="files/js/vue.js"></script>
    <style>
        html {
            width: 100%;
        }
        
        .gray-bg {
            width: 100%;
        }
        
        #app {
            height: 100%;
            width: 100%;
        }
        
        .wrapper {
            width: 100%;
        }
        
        .form-horizontal {
            width: 100%;
        }
        
        .searchInput {
            height: 34px;
        }
        
        .ibox-content {
            width: 100%;
        }
        
        #detailBox {
            display: none;
            position: absolute;
            background: #f0f3f4;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        
        .copyBtn {
            float: right;
            height: 100%;
            line-height: 1;
            padding: 0 12px;
        }
        
        .ibox-title h5 {
            width: 80%;
            white-space: nowrap;
        }
        
        .ibox-title h5 input {
            border: none;
            background: none;
            width: 150px;
            font-weight: 500;
            display: inline-block;
        }
        
        .table-responsive {
            border: none;
            overflow: auto;
        }
        
        @media screen and ( max-width: 400px) {
            .copyBtn {
                display: none;
            }
        }
    </style>
</head>

<body class="gray-bg">
    <div id="app">
        <div class="wrapper wrapper-content" :style="{display:(isShowDetail?'none':'block')}">
            <form action="javascript:;" class="form-horizontal" style="margin-bottom: 20px;">
                <div class="input-group col-sm-6 col-sm-offset-3 col-xs-12">
                    <input type="text" class="form-control searchInput" v-model="keywords">
                    <span class="input-group-btn"> 
                        <button type="button" class="btn btn-primary" @click="search()">搜索</button>
                    </span>
                </div>
            </form>

            <div class="ibox-content">
                <div class="table-responsive">
                    <table class="table table-striped companyDataTable">
                        <thead>
                            <tr>
                                <th>处理</th>
                                <th>负责人</th>
                                <th>联系电话</th>
                                <th>商户名称</th>
                                <th>详细地址</th>
                                <th>提交时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, idx) in companyList">
                                <td @click="dealWith(item.id, item.status)" style="cursor:pointer;" :style="{color:(item.status=='APPROVED'?'#23b7e5':'red')}" v-text="item.status=='APPROVED'?'已处理':'未处理'"></td>
                                <td v-text="item.contact_name"></td>
                                <td v-text="item.contact_mobile"></td>
                                <td v-text="item.store_name"></td>
                                <td v-text="item.store_addr"></td>
                                <td>{{item.add_time | dateForMat}}</td>
                                <td>
                                    <a href="javascript:;" @click="showDetail(idx)">查看详情</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="prevPage" @click="prevPage">
                            <a href="javascript:;" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="(item, idx) in totalPages" :class="{active:idx==(curPage-1)}" @click="jumpPage(idx+1)">
                            <a href="javascript:;" v-text="item"></a>
                        </li>
                        <li class="nextPage" @click="nextPage">
                            <a href="javascript:;" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="wrapper wrapper-content" id="detailBox" :style="{display:(!isShowDetail?'none':'block')}">
            <div class="row">
                <div class="col-sm-12 text-right">
                    <button class="btn btn-default" type="button" @click="isShowDetail=false">返回</button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <h3>负责人信息</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 法人：<input readonly="" :value="curDetailData.contact_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 身份证号码：<input readonly="" :value="curDetailData.contact_nic_number" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 联系电话：<input readonly="" :value="curDetailData.contact_mobile" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <!-- <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 微信号：<input readonly="" :value="curDetailData.contact_wechat_id" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div> -->
            </div>


            <div class="row">
                <div class="col-sm-6">
                    <h3>商户资料</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 商户名称：<input readonly="" :value="curDetailData.store_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 商户简称：<input readonly="" :value="curDetailData.store_abbr_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 营业执照注册号：<input readonly="" :value="curDetailData.license_number" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 客服电话：<input readonly="" :value="curDetailData.customer_service_tele" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 省市区：<input readonly="" :value="curDetailData.store_ad_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 详细地址：<input readonly="" :value="curDetailData.store_addr" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 联系邮箱：<input readonly="" :value="curDetailData.email" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-sm-6">
                    <h3>银行卡信息</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>开户人：<input readonly="" :value="curDetailData.account_holder" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 开户身份证：<input readonly="" :value="curDetailData.account_holder_nic_number" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 银行卡号：<input readonly="" :value="curDetailData.debit_card_number" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5> 预留手机号：<input readonly="" :value="curDetailData.account_holder_mobile" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>开户银行：<input readonly="" :value="curDetailData.bank_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>开户支行：<input readonly="" :value="curDetailData.branch_bank_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>开户省市：<input readonly="" :value="curDetailData.bank_ad_name" style="margin-left:10px;"></input>
                            </h5>
                            <button type="button" class="btn btn-default copyBtn" @click="copyData($event)">复制</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-sm-6">
                    <h3>商户照片</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>营业执照</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.business_license_image">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>门头照</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.store_image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>法人身份证正面</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.nic_card_up_side_image">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>法人身份证反面</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.nic_card_down_side_image">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>联系人身份证正面</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.one_manage_place">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>联系人身份证反面</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.two_manage_place">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>银行卡正面照片</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.bank_card">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>银行卡背面照片</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.bank_card_side">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>吧台照片</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.bar_card">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>内景照片</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.inner_card">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>其他资料照片1</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.other_image_one">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>其他资料照片2</h5>
                        </div>
                        <div class="ibox-content ">
                            <div class="item">
                                <img alt="image" class="img-responsive" :src="curDetailData.other_image_two">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 全局js -->
    <script src="files/js/jquery.min.js?v=2.1.4"></script>
    <script src="files/js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="files/js/content.js?v=1.0.0"></script>

    <!-- iCheck -->
    <script src="files/js/plugins/iCheck/icheck.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                companyList: [],
                totalPages: 1,
                curPage: 1,
                isShowDetail: false,
                curDetailData: {},
                keywords: '',
            },
            methods: {
                jumpPage: function(page) {
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "getCompanyData?curPage=" + page,
                        async: true,
                        success: function(res) {
                            that.companyList = res.data;
                            that.totalPages = res.totalPages;
                            that.curPage = page;
                        },
                        error: function(x, e) {

                        }
                    });
                },

                prevPage: function() {
                    if (this.curPage <= 1) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getCompanyData?curPage=" + (this.curPage - 1),
                            async: true,
                            success: function(res) {
                                that.companyList = res.data;
                                that.totalPages = res.totalPages;
                                that.curPage = res.curPage;
                            },
                            error: function(x, e) {

                            }
                        });
                    }
                },

                nextPage: function() {
                    if (this.curPage >= this.totalPages) {
                        return;
                    } else {
                        let that = this;
                        $.ajax({
                            type: "GET",
                            url: "getCompanyData?curPage=" + (this.curPage + 1),
                            async: true,
                            success: function(res) {
                                that.companyList = res.data;
                                that.totalPages = res.totalPages;
                                that.curPage = res.curPage;
                            },
                            error: function(x, e) {

                            }
                        });
                    }
                },

                showDetail: function(idx) {
                    this.curDetailData = this.companyList[idx];
                    this.isShowDetail = true;
                },

                dealWith: function(id, status) {
                    let that = this;
                    status = (status == 'SUBMITTED' ? 'APPROVED' : 'SUBMITTED');
                    $.ajax({
                        type: "PUT",
                        url: "dealWith",
                        data: {
                            "id": id,
                            "status": status
                        },
                        async: true,
                        success: function(res) {
                            if (that.keywords) {
                                that.search();
                            } else {
                                that.jumpPage(that.curPage);
                            }
                        },
                        error: function(x, e) {

                        }
                    });
                },

                // 复制数据
                copyData: function(event) {
                    $(event.target).prev().children('input')[0].select();
                    document.execCommand("Copy"); // 执行浏览器复制命令
                },

                // 搜索
                search: function() {
                    if (!this.keywords) {
                        this.getData();
                        return;
                    }
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "search?keywords=" + that.keywords,
                        async: true,
                        success: function(res) {
                            that.companyList = res.data;
                            that.totalPages = res.totalPages;
                            that.curPage = res.curPage;
                        },
                        error: function(x, e) {

                        }
                    });
                },

                // 获取数据
                getData: function() {
                    let that = this;
                    $.ajax({
                        type: "GET",
                        url: "getCompanyData?curPage=1",
                        async: true,
                        success: function(res) {
                            that.companyList = res.data;
                            that.totalPages = res.totalPages;
                            that.curPage = res.curPage;
                        },
                        error: function(x, e) {

                        }
                    });
                }
            },
            filters: {
                dateForMat: function(value) {
                    if (!value) return ''
                    let date = new Date(value);
                    let year = date.getFullYear();
                    let month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1);
                    let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
                    let hours = date.getHours();
                    let minutes = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
                    let seconds = date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                }
            },
            created: function() {
                this.getData();
            },
            mounted: function() {
                $(document).ready(function() {
                    $('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });

                    // var curCompanyIdx = 0;
                    /*$.each( $('.companyDataTable a'), function ( idx, n ) {
                        $(this).click(function () {
                            curCompanyIdx = i;
                            $('#detailBox').show();
                        })
                    })*/
                });
            }
        })
    </script>
</body>

</html>